import _http from "@/_http";
import { Button } from "antd-mobile";
import React, { useCallback, useEffect, useState } from "react";
import { Link } from "react-router-dom";

import './style.css'

const User = () => {
  const [users, setUsers] = useState([])

  useEffect(async () => {
    await getData()
  }, [])

  const getData = useCallback(async () => {
    const res = await _http('/user/list')
    console.log(res, 'res');
    if (res.data.code === 1) {
      setUsers(res.data.data)
    }else{
      setUsers([])
    }
  }, [])

  return (
    <div className="u_list">
      {users
        ? users.map((user) => (
            <div className="u_info" key={user._id}>
              <div className="ui_avatar">
                <img src={user.avatarUrl} alt={user.openid} />
              </div>
              <div className="ui_center">
                <div className="ui_name">{user.nickName}</div>
                {/* <div className="ui_openid">{user.openid}</div> */}
                <div className="ui_address">{`${user.province}${user.city}${user.country}`}</div>
              </div>
              <div className="ui_right">
                  <Link to={`/order/${user.openid}`}>订单</Link>
              </div>
            </div>
          ))
        : null}
    </div>
  );
};

export default User;
